import React from "react";
import "./SearchBar.css"

class SearchBar extends React.Component {
    constructor(){
        super();
        this.state={
            history:["历史记录一···","历史记录二···","历史记录三···","历史记录四···","历史记录五···"],
            isShowSearch:false,
            showIndex:-1,
            value:""
        }
    };
    render() {
      return <div className="search_bar_container">
                <div className="search_bar_wrapper">
                    <input
                    ref="inputValue"
                    value={this.state.value}
                    onFocus={()=>{
                        this.setState({
                            isShowSearch:true
                        })
                    }}
                    onBlur={()=>{  
                        this.setState({
                            isShowSearch:false
                        })
                    }}
                    onKeyDown={(el)=>{
                        var keyCode = el.keyCode
                        if(keyCode === 38){
                            var value = this.refs.inputValue.value;
                            console.log(value)
                            this.state.showIndex --;
                            if(this.state.showIndex < 0 ){
                                this.state.showIndex = this.state.history.length-1
                            }
                            console.log(this.state.showIndex)
                        }else if(keyCode === 40){
                            this.state.showIndex++;
                            if(this.state.showIndex >this.state.history.length-1){
                                this.state.showIndex = 0;
                            }
                        }else if(keyCode === 8){
                            this.refs.inputValue.value = '';
                        };
                        this.setState({
                            value : this.state.history[this.state.showIndex],
                            showIndex:this.state.showIndex
                        })
                    }}/> 
                    <button onClick={()=>{
                        if(this.refs.inputValue.value.length === 0){
                            alert('内容不可为🈳️');
                            return;
                        }
                    }}>百度一下</button>
                </div>
                <div className={this.state.isShowSearch?'search_bar_history':'search_bar_history_hidden'}>
                    {
                        this.state.history.map((el,index)=>{
                        return <div 
                        className={this.state.showIndex===index?'search_bar_history_hover':'search_bar_history_no'} key={index} onMouseEnter={()=>{
                            this.setState({
                                showIndex : index
                            })
                        }}>{el}</div>
                        })
                    }
                </div>
             </div>;
    }
};

export default SearchBar;